<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      layout:decorate="~{layout/base}">
<head>
    <title>首页 - 暖心助农选品平台</title>
    <style>
        .hero-section {
            padding: 100px 0;
            margin-bottom: 2rem;
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(46, 125, 50, 0.2);
            z-index: 1;
        }
        .hero-section .container {
            position: relative;
            z-index: 2;
        }
        .hero-section h1 {
            font-weight: 700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        .hero-section .lead {
            font-size: 1.5rem;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        .category-nav {
            background-color: #ffffff;
            padding: 1.5rem 0;
            margin-bottom: 2rem;
            border-radius: 1rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        .category-nav .nav-link {
            background-color: rgba(0, 0, 0, 0.1);
            border-color: #2E7D32;
            color: #2E7D32;
            font-weight: 600;
            padding: 0.8rem 2rem;
            border-radius: 2rem;
            margin: 0 0.5rem;
            transition: all 0.3s ease;
            cursor: pointer;
            border: 2px solid transparent;
            font-size: 1.1rem;
        }
        .category-nav .nav-link:hover {
            background-color: rgba(46, 125, 50, 0.1);
            border-color: #2E7D32;
            transform: translateY(-2px);
        }
        .category-nav .nav-link.active {
            background-color: #2E7D32;
            color: white;
            border-color: #2E7D32;
        }
        .category-nav .nav-pills {
            gap: 0.5rem;
        }
        .search-box {
            max-width: 600px;
            margin: 2rem auto;
        }
        .search-box .form-control {
            border: none;
            background: rgba(255, 255, 255, 0.9);
            padding: 1rem 1.5rem;
            font-size: 1.1rem;
            border-radius: 2rem 0 0 2rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .search-box .form-control:focus {
            background: white;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .search-box .btn {
            padding: 1rem 2rem;
            border-radius: 0 2rem 2rem 0;
            background-color: #2E7D32;
            border-color: #2E7D32;
            font-weight: 600;
            min-width: 120px;
        }
        .search-box .btn:hover {
            background-color: #1B5E20;
            border-color: #1B5E20;
            transform: translateY(-1px);
        }
        .card {
            transition: transform 0.3s ease;
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .card:hover {
            transform: translateY(-5px);
        }
        .card-img-top {
            height: 200px;
            object-fit: cover;
        }
        .product-item.hidden {
            display: none !important;
        }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <!-- Hero Section with Search -->
        <div class="hero-section" th:style="'background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(' + @{/images/farm-bg.jpg} + '); background-size: cover; background-position: center;'">
            <div class="container">
                <h1 class="display-4 mb-4">暖心助农选品平台</h1>
                <p class="lead mb-5">优质农产品，产地直供，助农惠民</p>
                <div class="search-box">
                    <div class="d-flex">
                        <input type="text" id="searchInput" class="form-control form-control-lg me-2" 
                               placeholder="搜索农产品...">
                        <button type="button" class="btn btn-success btn-lg" onclick="filterProducts()">搜索</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Category Navigation -->
        <div class="category-nav">
            <div class="container">
                <ul class="nav nav-pills justify-content-center">
                    <li class="nav-item">
                        <a class="nav-link active" data-category="all" onclick="filterByCategory(this, 'all')">全部</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-category="vegetables" onclick="filterByCategory(this, 'vegetables')">蔬菜</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-category="fruits" onclick="filterByCategory(this, 'fruits')">水果</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-category="grains" onclick="filterByCategory(this, 'grains')">粮食</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-category="others" onclick="filterByCategory(this, 'others')">其他</a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Products Grid -->
        <div class="container">
            <div id="searchResults" class="mb-4 d-none">
                <h4>搜索结果: <span class="text-muted" id="searchKeyword"></span></h4>
            </div>

            <div class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col product-item" th:each="product : ${products}" th:data-category="${product.category}"
                     th:data-name="${product.name}" th:data-description="${product.description}">
                    <div class="card h-100">
                        <img th:if="${product.image}" th:src="@{${product.image}}" class="card-img-top" alt="产品图片">
                        <img th:unless="${product.image}" th:src="@{/images/default-product.jpg}" class="card-img-top" alt="默认产品图片">
                        <div class="card-body">
                            <h5 class="card-title" th:text="${product.name}">产品名称</h5>
                            <p class="card-text" th:text="${product.description}">产品描述</p>
                            <p class="card-text">
                                <span class="badge bg-light text-dark" th:text="${product.category}">类别</span>
                            </p>
                            <div class="d-flex justify-content-between align-items-center">
                                <h4 class="text-danger mb-0" th:text="'￥' + ${product.price}">价格</h4>
                                <small class="text-muted" th:text="'库存: ' + ${product.stock}">库存</small>
                            </div>
                            <div sec:authorize="hasRole('EMPLOYEE')" class="mt-3">
                                <form th:action="@{/cart/add}" method="post" class="d-flex align-items-center">
                                    <input type="hidden" name="productId" th:value="${product.id}">
                                    <input type="number" name="quantity" value="1" min="1" th:max="${product.stock}" 
                                           class="form-control form-control-sm me-2" style="width: 80px;">
                                    <button type="submit" class="btn btn-success btn-sm flex-grow-1">
                                        加入购物车
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="noResults" class="alert alert-info mt-4 d-none">
                没有找到相关商品。
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script th:inline="javascript">
            $(document).ready(function() {
                // 处理购物车表单提交
                $('form[method="post"]').on('submit', function(e) {
                    e.preventDefault();
                    var form = $(this);
                    $.post(form.attr('action'), form.serialize())
                        .done(function(response) {
                            if (response === 'success') {
                                alert('已添加到购物车');
                            } else {
                                alert('添加失败: ' + response);
                            }
                        })
                        .fail(function() {
                            alert('添加失败');
                        });
                });

                // 监听搜索框的回车事件
                $('#searchInput').on('keypress', function(e) {
                    if (e.which === 13) {
                        filterProducts();
                    }
                });
            });

            // 分类筛选
            function filterByCategory(element, category) {
                // 更新激活状态
                $('.category-nav .nav-link').removeClass('active');
                $(element).addClass('active');

                // 重置搜索框
                $('#searchInput').val('');
                $('#searchResults').addClass('d-none');

                // 筛选商品
                filterProducts();
            }

            // 搜索和筛选商品
            function filterProducts() {
                const searchTerm = $('#searchInput').val().toLowerCase();
                const selectedCategory = $('.category-nav .nav-link.active').data('category');
                let hasResults = false;

                // 遍历所有商品
                $('.product-item').each(function() {
                    const $item = $(this);
                    const category = $item.data('category');
                    const name = $item.data('name').toLowerCase();
                    const description = $item.data('description').toLowerCase();

                    // 检查是否匹配分类和搜索词
                    const matchesCategory = selectedCategory === 'all' || category === selectedCategory;
                    const matchesSearch = !searchTerm || 
                                        name.includes(searchTerm) || 
                                        description.includes(searchTerm);

                    // 显示或隐藏商品
                    if (matchesCategory && matchesSearch) {
                        $item.removeClass('hidden');
                        hasResults = true;
                    } else {
                        $item.addClass('hidden');
                    }
                });

                // 更新搜索结果提示
                if (searchTerm) {
                    $('#searchResults').removeClass('d-none');
                    $('#searchKeyword').text(searchTerm);
                } else {
                    $('#searchResults').addClass('d-none');
                }

                // 更新无结果提示
                if (hasResults) {
                    $('#noResults').addClass('d-none');
                } else {
                    $('#noResults').removeClass('d-none');
                }
            }
        </script>
    </th:block>
</body>
</html> 